<!--开票信息-->
<template>
  <view class="" style="padding-bottom: 40rpx">
    <view class="">
      <view class="uni-card paddingL15 cardContent">
        <view class="row tagContent">
          <view class="tagStyle" :class="current == index ? 'active' : ''" @click="tagClick(index)"
            v-for="(item, index) in topTagList" :key="index">{{ item }}</view>
        </view>

      </view>
    </view>

    <view v-if="current == 0" style="padding: 30rpx;">
      <invoiceData :shareCode="shareCode" :taskId="taskId" :isDemo="isDemo"></invoiceData>
    </view>
    <view v-if="current == 1" style="padding: 30rpx;">
      <declarationData :shareCode="shareCode" :taskId="taskId" :isDemo="isDemo"></declarationData>
    </view>
    <view v-if="current == 2" style="padding: 30rpx;">
      <obtainInvoice :shareCode="shareCode" :taskId="taskId" :isDemo="isDemo"></obtainInvoice>
    </view>
    <loading :show="loading"></loading>
  </view>
</template>

<script>
import obtainInvoice from './obtainInvoice.vue';
import invoiceData from './invoiceData.vue';
import declarationData from './declarationData.vue';
export default {
  // 添加组件
  components: {
    obtainInvoice,
    invoiceData,
    declarationData
  },
  data() {
    return {
      oldCurrent: 0,
      current: 0,
      loading: false,
      topTagList: ['开具发票', '申报数据', '取得发票'],
      enterTime: '',
      outTime: "",
      stayTime: "",

    }
  },
  props: {
    shareCode: {
      type: String,
      default: ''
    },
    taskId: {
      type: String,
      default: ''
    },
    isDemo: {
      type: String,
      default: ''
    }
  },
  created() {
    this.enterTime = new Date();
  },

  methods: {

    tagClick(val) {
      if (this.current == val) return
      this.oldCurrent = this.current
      this.current = val
      let params = {
        Um_Key_ButtonName: this.topTagList[val],
        Um_Key_SourcePage: `报告详情-发票信息-${this.shareCode}`,
      }
      this.$umaTrack.pageClickTrack(params)

      //记录tab切换埋点时间
      this.outTime = new Date();
      const stayTime = this.outTime.getTime() - this.enterTime.getTime()
      this.enterTime = this.outTime
      const route = this.$util.getCurrentRoute()
      let Um_Key_PageCategory = this.shareCode + '-' + '发票信息' + '-' + this.topTagList[this.oldCurrent]
      let paramsPageView = {
        Um_Key_PageCategory,
        Um_Key_SourcePage: route.path,
        Um_Key_Duration: Number(stayTime) / 1000,
      }
      this.$umaTrack.pageViewTrack(paramsPageView)
    },


    //获取企业近三年的开票金额
    // getInvioce() {
    //   this.loading = true
    //   let params = {
    //     shareCode: this.shareCode,
    //     taskId: this.taskId
    //   }
    //   getReportDetailInvApi(params).then(res => {
    //     this.invoiceList = res.data
    //   }).finally(() => {
    //     this.loading = false
    //   })
    // },
    //获取企业近三年的申报金额
    // getReportDetailInvoice() {
    //   this.loading = true
    //   let params = {
    //     shareCode: this.shareCode,
    //     taskId: this.taskId
    //   }
    //   getReportDetailInvoiceApi(params).then(res=> {
    //     this.declareList = res.data
    //   }).finally(() => {
    //     this.loading = false
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 300px;
  z-index: 3;
}

.w70 {
  width: 45%;
  text-align: right;
  font-size: 28rpx;
  color: #999999;
  white-space: nowrap;
}

.w30 {
  width: 55%;
  text-align: left;
  font-size: 28rpx;
  color: #222222;
  font-weight: 500;
  //white-space: nowrap;
}

.marginL16 {
  margin-left: 16rpx
}

.cardContent {
  box-shadow: none;
  padding-top: 20rpx;
  //padding-bottom: 20rpx;
  border-radius: 0 0 15rpx 15rpx;
  margin-top: 0;

  .tagContent {
    background: #D3E3FE;
    line-height: 80rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    font-weight: 500;

    .tagStyle {
      width: 50%;
      height: 80rpx;
      text-align: center;
    }

    .active {
      color: #FFFFFF;
      background: #488AFD;
      border-radius: 16rpx;
    }
  }
}

.title {
  //background: #F1F5F9;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  margin: 10rpx 0;
}

.itemTitle {
  background: #F1F5F9;
  color: #a8a8a8;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding: 10rpx 16rpx;
}

.uni-card1 {
  background: #fff;
  border-radius: 8upx;
  margin: 20upx 0;
}

.taxclassTable {
  /deep/ .table-container {
    //width: 180%;
  }
}

/deep/ .table-container {
  border-radius: 20rpx;
  overflow: hidden;
}

/deep/ .data-cell {
  padding: 20rpx 12rpx;
}
</style>